<template>
    <div id="todos">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Welcome Vue js 2.0</div>
                    <div class="panel-body">
                        <h1>My todos {{todoCount}}</h1>
                        <ul class="list-group">
                            <li class="list-group-item"
                                v-bind:class="{'completed' : todo.completed}"
                                v-for="(todo,index) in todos">
                                <router-link :to="{name:'todo',params:{id:todo.id}}">{{todo.title}}</router-link>
                                <button class="btn btn-warning btn-xs pull-right"
                                        v-on:click="deleteTodo(todo,index)"
                                >Delete
                                </button>
                                <button class="btn  btn-xs pull-right"
                                        v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success']"
                                        v-on:click="toggleCompletion(todo)"
                                >{{todo.completed? 'Done' : 'Completed'}}
                                </button>
                            </li>
                        </ul>
                        <todo-form ></todo-form>
                    </div>

                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import TodoForm from './TodoForm'
    export default {
        name:'todos',
        computed:{
            todos(){
                return this.$store.state.todos
            },
            todoCount:function(){
                return this.$store.state.todos.length;
            }
        },
        methods:{
            deleteTodo(todo,index){
                this.$store.dispatch('removeTodo',{todo,index})
            },
            toggleCompletion(todo){
                this.$store.dispatch('completeTodo',todo)
            }
        },
        components: {
            //子组件
            TodoForm
        },
    }
</script>

<style scoped>
    .completed{
        color:aquamarine;
        text-decoration: line-through;
    }
</style>
